<!DOCTYPE html>
<html><!-- index for ws.js or totally online Web IDE -->
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Bangle.js emulator</title>
  <style>
  body {
    overflow:hidden;
  }
  #emu {
    width:500px; height:500px; border:1px solid black;
  }
  #gfxdiv {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:274px;height:254px;
  }
  #BTN1 {
    width:20px;height:63px;position:absolute;right:0px;top:0px;padding:0;font-weight:bold;
  }
  #BTN2 {
    width:20px;height:63px;position:absolute;right:0px;top:63px;padding:0;font-weight:bold;
  }
  #BTN3 {
    width:20px;height:63px;position:absolute;right:0px;top:126px;padding:0;font-weight:bold;
  }
  #BTN4 {
    width:125px;height:240px;position:absolute;left:0px;top:0px;padding:0;font-weight:bold;
  }
  #BTN5 {
    width:125px;height:240px;position:absolute;left:120px;top:0px;padding:0;font-weight:bold;
  }
  #border {
    width:20px;height:21px;position:absolute;right:0px;top:193px;color:white;text-decoration:none;background-color:gray;cursor:pointer;
    font-size: 17px;text-align: center;
  }
  #screenshot {
    width:20px;height:21px;position:absolute;right:0px;top:219px;color:white;text-decoration:none;background-color:black;cursor:pointer;
  }
  #gfxcanvas {
    image-rendering: pixelated;
    border: 5px solid #fff;
  }
  </style>
</head>
<body>

<div id="gfxdiv">
  <canvas id="gfxcanvas" width="240" height="240"></canvas>
  <button id="BTN1">1</button>
  <button id="BTN2">2</button>
  <button id="BTN3">3</button>
  <a id="border">&#x05EF;</a>
  <a id="screenshot">&#x1F4F7;</a>
  <div id="BTN4"></div>
  <div id="BTN5"></div>
</div>

<script src="emulator_banglejs1.js"></script>
<script src="emu_banglejs1.js"></script>
<script src="common.js"></script>
<script>
function jsUpdateGfx() {
  var changed = Module.ccall('jsGfxChanged', 'number', [], []);
  if (changed) {
    var canvas = document.getElementById('gfxcanvas');
    var ctx = canvas.getContext('2d');
    var imgData = ctx.createImageData(240, 240);
    var rgba = imgData.data;
    jsGetGfxContents(rgba);
    ctx.putImageData(imgData, 0, 0);

  }
  jsHandleIO();
}
function jsInitButtons() {
  var div = document.getElementById("gfxdiv");
  function handleButton(n, pin) {
    hwPinValue[pin]=1; // inverted
    var btn = document.getElementById("BTN"+n);
    btn.addEventListener('mousedown', e => {
      e.preventDefault();
      hwPinValue[pin]=0; // inverted
      jsTransmitPinEvent(pin);
    });
    btn.addEventListener('mouseup', e => {
      hwPinValue[pin]=1; // inverted
      jsTransmitPinEvent(pin);
    });
    btn.addEventListener('mouseenter', e => {
      if (e.buttons) {
        hwPinValue[pin]=0; // inverted
        jsTransmitPinEvent(pin);
      }
    });
    btn.addEventListener('mouseleave', e => {
      // mouseleave comes *before* mouseenter usually - so delay it
      // in order to get overlap when swiping to make Bangle.js screen swipes work
      setTimeout(function() {
        if (!hwPinValue[pin]) {
          hwPinValue[pin]=1; // inverted
          jsTransmitPinEvent(pin);
        }
      },10);
    });
  }
  handleButton(1,BTN1);
  handleButton(2,BTN2);
  handleButton(3,BTN3);
  handleButton(4,BTN4);
  handleButton(5,BTN5);
}
</script>
</body>
</html>
